<template>
  <div class="app-container">
    <div class="sp" v-for="machine in list" :key="machine.id">
      <line-chart :class-name="machine.machineName" />
    </div>

  </div>
</template>

<script>
import {listMachine} from "@/api/machine/machine";
import lineChart from "@/components/echarts/LineComponent1"

export default {
  name: "Online",
  components: {
    lineChart,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        machineName: null,
        machineState: null,
        areaId: null
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询登录日志列表 */
    getList() {
      this.loading = true;
      listMachine(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getRandom(length) {
      return Array.from({length}, () => Math.random())
    }

  }
};
</script>

<style>
.sp {
  float: left;
  background-color: #fff;
  box-sizing: border-box;
  padding: 25px 40px 0;
  margin: 10px 10px 10px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 400px;
  height: 350px;
}
</style>
